<!DOCTYPE html>
<html>
  <head>
    <title>Nunjucks 中文文档</title>

    <meta charset="utf-8">
    <meta name="description" content="Nunjucks 模板引擎 -- JavaScript 专用的功能丰富、强大的模板引擎。">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min4.css">
    <link rel="stylesheet" type="text/css" href="static/css/highlight.css">
    <link rel="stylesheet" type="text/css" href="static/css/app.css">
    <link rel="icon" type="image/png" href="https://nunjucks.bootcss.com/img/favicon.png">
  </head>

  <body id="home">
    <nav class="navbar navbar-default navbar-fixed-top">
      <a class="pull-left logo" href="">Nunjucks</a>

      <ul class="nav navbar-nav navbar-right pull-right">
        <li><a href="#download" class="download">下载</a></li>
        <li><a href="javascript:;">GitHub</a></li>
        <li class="dropdown">
          <a href="javascript:;" data-toggle="dropdown">中文文档</a>

          <ul class="dropdown-menu">
            <li><a href="javascript:;">快速上手</a></li>
            <li><a href="javascript:;">模板功能</a></li>
            <li><a href="javascript:;">API</a></li>
            <li><a href="javascript:;">常见问题</a></li>
          </ul>
        </li>
      </ul>
    </nav>



<div class="banner">
  <div class="banner-screen">
    <h1>Nunjucks</h1>
    <div class="tagline">
      功能丰富、强大的 JavaScript 专用模板引擎。
    </div>
  </div>

  <div class="download-screen">
    <div class="inner">
      <a href="#" class="close">x</a>

      <div class="col-sm-6">
        <h1>Node</h1>
        <p>
          通过 npm 安装即可：
          <pre><code>$ npm install nunjucks</code></pre>
        
        <p>
          <a href="javascript:;">快速上手 &rarr;</a>
        </p>
      </div>
      <div class="col-sm-6">
        <h1>浏览器</h1>
        <p>
          引入 <a href="javascript:;">nunjucks.js</a>
          (<a href="javascript:;">min</a>) 完整库，或者
         引入 <a href="javascript:;">nunjucks-slim.js</a>
          (<a href="javascript:;">min</a>) 瘦身版。
          瘦身版只能用于预编译模板。
          请在“快速上手”章节了解两种版本的不同。
        </p>

        <p>
          <a href="javascript:;">快速上手 &rarr;</a>
        </p>
      </div>
    </div>
  </div>
</div>

<div class="page">
  <section class="links">
    <ul>
      <li><a href="#download" class="download">下载</a></li>
      <li><a href="javascript:;">GitHub</a></li>
      <li><a href="javascript:;">模板功能</a></li>
      <li><a href="javascript:;">API</a></li>
      <li><a href="javascript:;">常见问题</a></li>
    </ul>
  </section>

  <section class="opening">
    <div class="col-sm-6">
      <div class="tagline2">
        你曾经一直在寻觅的 JavaScript 模板引擎就在这里！
      </div>

      <ul>
        <li><strong>功能丰富</strong>且强大，并支持块级继承（block
          inheritance）、自动转义、宏（macro）、异步控制等等。完美继承了 <a href="javascript:;">jinja2</a> 的衣钵。</li>
        <li><strong>快速 &amp; 干练</strong> 并且高效。运行时代码经过压缩之后只有 8K 大小，
          可在浏览器端执行预编译模板。</li>
        <li><strong>可扩展</strong> 性超强，用户可以自定义过滤器（filter）和扩展模块。</li>
        <li><strong>到处</strong> 可运行，无论是 node 还是任何浏览器都支持，并且还可以预编译模板。</li>
      </ul>
    </div>

    <div class="col-sm-6">
      <pre>{% <span>extends</span> "base.html" %}

{% <span>block</span> header %}
&lt;h1&gt;{{ title }}&lt;/h1&gt;
{% <span>endblock</span> %}

{% <span>block</span> content %}
&lt;ul&gt;
  {% <span>for</span> name, item in items %}
  &lt;li&gt;{{ name }}: {{ item }}&lt;/li&gt;
  {% <span>endfor</span> %}
&lt;/ul&gt;
{% <span>endblock</span> %}
      </pre>
    </div>
  </section>

  <section class="getting-started">
    <a href="javascript:;">
      <button class="btn btn-lg btn-success">快速上手 &rarr;</button>
    </a>
  </section>

  <section class="whos-using">
    <h3>谁在用 Nunjucks ？</h3>

    <div class="user">
      <h4>Firefox Marketplace</h4>
      <div class="col-sm-6">
        <blockquote>
          <p>
            &ldquo;Nunjucks 帮助我们移植了
            Django 项目中的所有模板，这些模板变得更容易管理了。
            通过将模板传输到客户端，传输
            体积减少了、页面响应速度显著地提升了。
            因为我们通过 API 输出数据，这意味着我们可以
            将前端和后端的测试分离开来。
            Nunjucks 让我们的应用在体验上更接近原生应用。&rdquo;
          </p>
          <p>&ndash; Matt Basta, <a href="javascript:;">Firefox Marketplace</a> team</p>
        </blockquote>
      </div>
      <div class="col-sm-6">
        <a href="static/picture/marketplace2x.png"><img src="static/picture/marketplace2x.png"></a>
      </div>
    </div>

    <div class="user">
      <h4>Mozilla Webmaker</h4>
      <div class="col-sm-6">
        <blockquote>
          <p>
            <a href="javascript:;">Webmaker</a> 来自
            Mozilla 基金会，它鼓励人们去创造。通过 web
            技术，你可以通过强大的实时工具创建视觉丰富的媒体内容。
            通过使用 nunjucks，开发模板也
            可以轻松地协作，实现类似
            本地化之类的复杂功能。
            nunjucks 在性能和稳定性上完全没问题。
          </p>
        </blockquote>
      </div>
      <div class="col-sm-6">
        <a href="static/picture/webmaker2x.png"><img src="static/picture/webmaker2x.png"></a>
      </div>
    </div>

    <div class="user">
      <h4>Backbeam</h4>

      <div class="col-sm-6">
        <blockquote>
          <p>
            &ldquo;Backbeam 为移动设备和 web 提供开发工具。
            当我们为 web 开发功能做计划时，
            我们需要一个易于使用并且功能强大
            的模板引擎。但是几乎所有的 JavaScript
            模板引擎都缺乏重要的功能，例如
            模板继承或能够灵活地添加自定义
            行为（例如自定义过滤器）。后来我们在
            James 的网站上看到了 nunjucks 的公告。从那一刻起，
            我们就知道 nunjucks 将会是最好的选择。现在，
            我们在产品的许多部分都使用了 nunjucks。用户
            可以直接在浏览器中使用 nunjucks 编辑 HTML 和电子邮件模板。
            我们对我们的选择感到非常满意
            :)&rdquo;
          </p>

          <p>&ndash; Alberto Gimeno, founder of <a href="javascript:;">backbeam.io</a></p>
        </blockquote>
      </div>
      <div class="col-sm-6">
        <a href="static/picture/backbeam2x.png"><img src="static/picture/backbeam2x.png"></a>
      </div>
    </div>

    <div class="user">
      <h4>Apostrophe CMS</h4>
      <div class="col-sm-6">
        <blockquote>
          <p>
            &ldquo;P'unk Avenue 选择将 Nunjucks 作为
            <a href="javascript:;">Apostrophe</a>
            （这是一个面向 node 开发者的开源 CMS）内容管理系统的模板语言。
            我们选择 Nunjucks 是因为它与
            Jinja 和 Twig 很相似，并且
            具有很好的测试覆盖率以及健壮的
            实现。&rdquo;
          </p>
          <p>
            &ndash; Tom Boutell, Senior Developer at <a href="javascript:;">P'unk Avenue</a>
          </p>
        </blockquote>
      </div>
      <div class="col-sm-6">
        <a href="static/picture/apostrophe2x.png"><img src="static/picture/apostrophe2x.png"></a>
      </div>
    </div>

    <em><a href="javascript:;">还有更多更多...</a></em>
  </section>

  
  <section class="examples">
    <h3>更多实例</h3>

    <div class="example clearfix">
      <div class="col-sm-6">
        <strong>内置了大量过滤器（filter）</strong>可供直接使用，对变量进行处理，也可以开发自己专属功能。
      </div>
      <div class="col-sm-6">
        <pre>{{ foo | title }}
{{ foo | join(",") }}
{{ foo | replace("foo", "bar") | capitalize }}</pre>
      </div>
    </div>

    <div class="example clearfix">
      <div class="col-sm-6">
        可以对任何函数或过滤器（filter）使用 <strong>关键字参数（keyword arguments）</strong>。
      </div>

      <div class="col-sm-6">
        <pre>{{ foo(1, 2, bar=3, baz=4) }}
{{ bar | transform(level=2) }}</pre>
      </div>
    </div>

    <div class="example clearfix">
      <div class="col-sm-6">
        <strong>模板继承</strong> 能让你以更强大的方式复用模板。通过定义父模板的基本结构然后由子模板来填充内容。
      </div>

      <div class="col-sm-6">
        <pre>{% <span>extends</span> &quot;base.html&quot; %}

{% <span>block</span> header %}
&lt;h3&gt;{{ subtitle }}&lt;/h3&gt;
{% <span>endblock</span> %}

{% <span>block</span> content %}
&lt;h1&gt;{{ page.title }}&lt;/h1&gt;
&lt;p&gt;{{ page.content }}&lt;/p&gt;
{% <span>endblock</span> %}</pre>
      </div>
    </div>

    <div class="example clearfix">
      <div class="col-sm-6">
        如果你需要在过滤器中调用异步函数，你甚至还可以编写 <strong>异步模板</strong>！充分利用 <code><a href="javascript:;">asyncAll</a></code>
        从而让所有循环并行执行，
        假定 <code>lookup</code> 过滤器是异步执行的。
      </div>
      <div class="col-sm-6">
        <pre>&lt;h1&gt;Posts&lt;/h1&gt;
&lt;ul&gt;
{% <span>asyncAll</span> item in items %}
  &lt;li&gt;{{ item.id | lookup }}&lt;/li&gt;
{% <span>endall</span> %}
&lt;/ul&gt;</pre>
      </div>
    </div>

    <p class="ending">
      这只是开胃菜而已。请查看 <a href="javascript:;">中问文档</a> 了解所有强大特性！
    </p>

    <a href="javascript:;">
      <button class="btn btn-lg btn-success">快速上手 &rarr;</button>
    </a>
  </section>


  
</div>


    <footer>
      Found a bug in the
      documentation? <a href="javascript:;">Fix
      it or file an issue</a>!
    </footer>

    <script src="static/js/jquery.min4.js"></script>
    <script src="static/js/affix.js"></script>

    <script src="static/js/app.js"></script>
    <script src="static/js/subpage.js"></script>

<!-- commented out temporarily while we figure out how to get GA for mozilla.github.io
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-9014321-3', 'jlongster.github.io');
  ga('send', 'pageview');
</script>
-->
  </body>
</html>
